<template>
  <!-- 项目集管理  -->
    <div class="interestCalculationDetailsPage">
        <div class="search-wrap d-flex flex-wrap">
            <div class="search-item d-flex a-center m-l20">
                <label>项目名称</label>
                <el-input v-model="form.projectSetName" class="m-l5" placeholder="请输入项目集名称"></el-input>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider class="m-l50 m-r50" direction="vertical" />

                <el-button
                        style="color:#FC7018;background: #FFFFFF;"
                        @click="addAndEditHandle('create',{})"
                >
                    <svg-icon icon-class="add-icon-1" class="icon-export m-r5"></svg-icon>
                    添加
                </el-button>
                <el-button
                        style="color:#FC7018;background: #FFFFFF;"
                        @click="onExport"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :tableData="tableData"
                :tableOption.sync="tableOption"
                @page-change="onPageChange"
        >
            <template #buttons="scope">
                <el-button
                        color="#FFF8F6"
                        style="color:#FC7018;border-color: #FC7018;"
                        @click="addAndEditHandle('update',scope.row)"
                >
                    编辑
                </el-button>
                <el-button
                        color="#FC7018"
                        style="color:#FFFFFF;"
                        @click="addAndEditHandle('query',scope.row)"
                >
                    查看
                </el-button>
                <svg-icon
                    icon-class="delete-icon"
                    class="delete-icon m-l10"
                    @click="deleteHandle(scope.row)"
                ></svg-icon>
            </template>
        </public-table>
    </div>

  <!-- 查看合计   -->
    <public-dialog
            :title="'查看合计'"
            :width="'80%'"
            :confirmButtonTitle="'确认'"
            v-model:visible="visible"
            @onConfirm="onConfirm"
    >
        <div class="public-dialog-content d-flex flex-column">

        </div>
    </public-dialog>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElDivider,
    ElDatePicker, ElUpload, ElLoading, ElMessage, ElMessageBox
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";
import {tableCommonFun} from "@/hooks/tableCommon";
import {UploadFilled} from "@element-plus/icons-vue";
import PublicDialog from "@/components/PublicDialog.vue";
import {physicalCultureApi} from "@/api/businessFinance";
import {exportExcelFile} from "@/common/utils/GlobalUtils";
import {useRouter} from "vue-router";
import {projectSetApi} from "@/api/investment";

const interfaceConfig = reactive({
    fileName:'investment',
    apiPath:'projectSetApi.getProjectSetPage',
});
const exportConfig = reactive({
    fileName:'investment',
    apiPath:'projectSetApi.exportProjectSet',
    tableName:'项目集表'
});
const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig);

form.value = {
    projectSetName:''
}

tableOption.value = [
    { label: "ID", prop: "projectSetId" },
    { label: "项目集名称", prop: "projectSetName" },
    { label: "发起部门", prop: "departmentName" },
    { label: "项目总投（万）", prop: "totalProjectAmount" },
    { label: "创建时间", prop: "createTime" },
    {   label: '操作',
        slot: true,
        width: 300,
        overHidden:false,
        slotName: 'buttons',
        fixed: "right"
    },
];

/**
 * 导入确认按钮
 */
const visible = ref(false);
const onConfirm = () => {
    visible.value = false;
}

/**
 * 导入按钮
 */
const onImport = () => {
    visible.value = true;
}

/**
 * 模版导出按钮
 */
const onTemplateExport = () => {
    physicalCultureApi.bfFinanceOtherParkingLotTemplate().then(res=>{
        if(res){
            exportExcelFile(res,'停车场其他业务账单模版');
        }else{
            ElMessage.error('导出失败!');
        }
    });
}

/**
 * 上次文件方法
 * @param file
 */
const uploadFile = (file) => {
    const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
    });
    let uploadFile = new FormData();
    uploadFile.append("file", file.file);
    physicalCultureApi.importExcelBfFinanceOtherParkingLot(uploadFile).then(res=>{
        if (res.code == 200) {
            loading.close();
            ElMessage.success("上传成功!");
            visible.value = false;
            getData({
                pageNum:1,
                pageSize:10,
                param:{}
            });
        }
    });
}

const tableOption2 = ref([
    { label: "商家优免销售总额合计", prop: "businessMoneyAll" },
    { label: "售卖商家数合计", prop: "businessNumberAll" },
    { label: "售卖券张数合计", prop: "voucherNumberAll" },
    { label: "储值金额合计", prop: "saveMoneyAll" },
    { label: "储值用户数合计", prop: "saveNumberAll" },
    { label: "退费金额合计", prop: "refundMoneyAll" },
    { label: "退费用户数合计", prop: "refundNumberAll" },
    { label: "储值卡用户当日扣费合计", prop: "saveChargingAll" },
    { label: "储值卡用户总余额合计", prop: "saveBalanceAll" },
    { label: "储值卡余额>0的用户数合计", prop: "saveBalanceNumberAll" },
]);
const tableData2  = ref([]);

/**
 * 查看合计确认按钮
 *
 */
const visible2 = ref(false);
const onConfirm2 = () => {
    visible2.value = false;
}

/**
 * 查看合计
 */
const queryTotal = () => {
    visible2.value = true;
    physicalCultureApi.bfFinanceOtherParkingLotAmount({}).then(res=>{
        tableData2.value = [{...res.data}];
    });
}

const router = useRouter();
/**
 * 添加或者编辑项目集
 */
const addAndEditHandle = (type,row) => {
    router.push({path:`/investmentProjectManagement/preparatoryProject/programManagementAddAndEdit/${type}/${row.projectSetId || "-"}`});
}

/**
 * 删除项目集
 * @param row
 */
const deleteHandle = (row) => {
    ElMessageBox.confirm(
        '确认删除项目集吗?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then((action) => {
            if(action === 'confirm'){
                projectSetApi.deleteProjectSet({projectSetId:row.projectSetId})
                    .then(res=>{
                        const { code, data, msg } = res;
                        if (code == 200) {
                            ElMessage({
                                type: 'success',
                                message: '删除成功!',
                            });
                            onQuery();
                        }
                    });
            }
        })
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:10,
        param:{}
    });
});
</script>

<style lang="scss" scoped>
.interestCalculationDetailsPage{
  .delete-icon{
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .search-wrap{
    .search-item{

      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
